<template>
  <div class="navfooter">
    <ul class="service">
      <li>预约维修服务</li>
      <li>7天无理由退货</li>
      <li>15天免费换货</li>
      <li>满69元包邮</li>
      <li>1100余家售后网点</li>
    </ul>
    <div class="information">
      <div class="links">
        <Link :linkArray="serviceCentre"></Link>
        <Link :linkArray="serviceCentre"></Link>
        <Link :linkArray="aboutShopping"></Link>
        <Link :linkArray="aboutUs"></Link>
      </div>
      <div class="contact">
        <p class="number">950805</p>
        <p class="contact-time">7x24小时客服热线（仅收取市话费）</p>
        <div class="contact-btn">
          <button>在线客服</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Link from "./Link.vue";
export default {
  data() {
    return {
      shoppingGuide: ["选购指南"],
      serviceCentre: [
        "服务中心",
        "申请售后",
        "售后政策",
        "维修服务价格",
        "订单查询",
        "以旧换新",
        "保障服务",
        "防伪查询",
      ],
      aboutShopping: ["支付方式", "配送方式", "常见问题"],
      aboutUs: ["新浪微博", "官方微信", "联系我们", "公益基金会"],
    };
  },
  components: {
    Link,
  },
};
</script>

<style lang="scss" scoped>
li,
p {
  color: #fff;
}
.navfooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 50px;
  background-color: #2f333a;
  .service {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1000px;
    padding: 0 100px;
    li {
      padding: 20px 0;
    }
  }
  .information {
    display: flex;
    justify-content: center;
    width: 1000px;
    height: 100%;
    padding: 0 100px;
    margin: 0 auto;
    margin-top: 20px;
    .links {
      display: flex;
      justify-content: space-between;
    }
    .contact {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
